<template>
  <div v-if="show">
    <a-form layout="horizontal">
      <a-form-item :label="$t('m.portalDesign.config.widget.name')" v-if="data.type != 'grid'">
        <a-input v-model="data.options.title" />
      </a-form-item>
      <a-form-item
        :label="$t('m.portalDesign.config.widget.titleRequired')"
        v-if="Object.keys(data.options).indexOf('titleRequired') >= 0"
      >
        <a-switch v-model="data.options.titleRequired" />
      </a-form-item>
      <a-form-item :label="$t('m.portalDesign.config.widget.width')" v-if="data.w == 0 || data.w > 0">
        <a-input-number v-model="data.w" :min="1" :max="12" :step="1" />
        <a-tooltip>
          <template slot="title">
            {{ $t('m.portalDesign.config.widget.widthtooltip') }}
          </template>
          <ych-icon class="fm-icon-question-circle" type="question-circle" />
        </a-tooltip>
      </a-form-item>

      <a-form-item :label="$t('m.portalDesign.config.widget.height')" v-if="data.h">
        <a-input-number
          :formatter="value => `${value}px`"
          :parser="value => value.replace('px', '')"
          v-model="dataHeight"
          :min="100"
          :max="2000"
          :step="10"
          @change="changeNumber"
        />
      </a-form-item>
      <a-form-item :label="$t('m.portalDesign.config.widget.pageUrl')" v-if="data.type != 'grid'">
        <a-textarea :disabled="true" v-model="data.url" />
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      dataHeight: 0
    };
  },
  computed: {
    show() {
      if (this.data && Object.keys(this.data).length > 0) {
        return true;
      }
      return false;
    }
  },
  methods: {
    changeNumber(value) {
      if (value === '' || value == null) {
        this.dataHeight = 100;
        this.data.h = 10;
      } else {
        this.data.h = this.dataHeight / 10;
      }
    }
  },
  watch: {
    'data.h'(val) {
      if ((Object.keys(this.data).length > 0 && val == null) || val == '') {
        this.data.h = 10;
      }
      this.dataHeight = this.data.h * 10;
    },
    'data.w'(val) {
      if ((Object.keys(this.data).length > 0 && val == null) || val == '') {
        this.data.w = 1;
      }
    }
  }
};
</script>
